<template>
	<view class="container">
		<view class="course_cover">
			<template class="" v-if="couresData.courseDetails.courseType == 0">
				<video v-if="couresData.courseDetails.courseWay == 0" @fullscreenchange="fullscreenchange" id="myVideo"
					:src="couresData.courseDetails.videoUrl" autoplay='true'></video>
				<image @tap="preview(couresData.courseDetails.courseCover)" v-if="couresData.courseDetails.courseWay == 1" :src="couresData.courseDetails.courseCover"
					mode=""></image>
			</template>
			<template class="" v-if="couresData.courseDetails.courseType == 1">
				<image @tap="preview(couresData.courseDetails.courseCover)" :src="couresData.courseDetails.courseCover" mode=""></image>
			</template>


		</view>
		<view class="course_name">
			<view class="course_name_text">
				<text>{{couresData.courseDetails.courseName}}</text>
				<image @click="shareApp" :src="iconUrl + '88.png'" mode=""></image>
				<!-- #ifdef MP-WEIXIN -->
				<button class="share" open-type="share">分享</button>
				<!-- #endif -->
			</view>
			<view class="course_name_tips" v-if="tabs.tabsArr[1].isShow">
				共{{couresData.courseChapterList.length}}期</view>
		</view>
		<view class="course_tabs">
			<view class="course_tabs_box">
				<template v-for="(tabItem,tabIndex) in tabs.tabsArr" :key="tabItem.type">
					<view class="course_tab_item " v-if="tabItem.isShow" @tap="tabs.tabBtn(tabItem)">
						<view
							:class="['course_tab_item_name',tabs.tabAct == tabItem.type ? 'course_tab_item_name_act' : ' '] ">
							{{tabItem.name}}
						</view>
						<view class="course_tab_item_tips" v-if="tabs.tabAct == tabItem.type"></view>
					</view>
				</template>


			</view>

		</view>

		<view class="course_content">
			<template v-if="tabs.tabAct == 1">
				<view class="mask" v-if="couresData.courseDetails.status == 2 && tabs.tabAct == 1">本课程已下架无法查看</view>
				<courseIntroduce ref="courseIntroduceRef" :htmlData='couresData.courseDetails.courseInfo'>
				</courseIntroduce>
			</template>
			<template v-if="tabs.tabAct == 2">
				<caatalog ref="caatalogRef" :viewTheCrowd="couresData.courseDetails.viewTheCrowd"
					:courseChapterList="couresData.courseChapterList" :couresStatus="couresData.courseDetails.status"
					:getCourseDetails="couresData.getCourseDetails" :couresId="couresData.courseDetails.id"></caatalog>
			</template>
			<template v-if="tabs.tabAct == 3">
				<examination ref="examinationRef" :courseExamInfo="couresData.courseExamInfo"
					:courseExamRecordList="couresData.courseExamRecordList" :couresId="couresData.courseDetails.id"
					:getCourseDetails="couresData.getCourseDetails"></examination>
			</template>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref, reactive } from 'vue'
	import { onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'
	import api from '@/api'
	import caatalog from './components/catalog.vue'
	import courseIntroduce from './components/courseIntroduce.vue'
	import examination from './components/examination.vue'
	import { useStudioStoreToRefs } from "@/store/useStudioStore";
	import { onLoad, onShow, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
	import configs from '@/config';
	import { useUserStoreToRefs } from '@/store/useUserStore';
	const { isCheck, userInfo } = useUserStoreToRefs();
	let { workSpace } = useStudioStoreToRefs()
	const caatalogRef = ref()
	const courseIntroduceRef = ref()
	const examinationRef = ref()
	const courseId = ref('')
	const iconUrl = ref("https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/icon-")
	/* tabs */
	const tabs = reactive({
		tabsArr: [{ name: '详情', isShow: true, type: 1 }, { name: '目录', isShow: false, type: 2 }, { name: '考试', isShow: false, type: 3 }],
		tabAct: 1,
		tabBtn: async (val : any) => {
			tabs.tabAct = val.type
		}
	})
	onLoad(async (options) => {
		courseId.value = options.courseId

	})
	onShow(async () => {
		await couresData.getCourseDetails(courseId.value)
	})
	//分享
	onShareAppMessage(() => {
		let courseBrief = ''
		if (couresData.courseDetails.courseBrief) {
			courseBrief = '-' + couresData.courseDetails.courseBrief.slice(0, 7) + (couresData.courseDetails.courseBrief.length > 7 ? '...' : '')
		}
		let cans = `${configs.api}/?xcx=xjs&shareRefereeId=${userInfo.value.id || ''}&text=wx&data1=${courseId.value}&type=6`;
		return {
			title: couresData.courseDetails.courseName + courseBrief,
			path: `/pages/shareRefereeId/index?q=${encodeURIComponent(cans)}`,
			imageUrl: couresData.courseDetails.courseCover
		};
	});
	const shareApp = async () => {
		let cans = `${configs.api}/?xcx=xjs&shareRefereeId=${userInfo.value.id || ''}&text=wx&data1=${courseId.value}&type=6`;
		const res: any = await api({
			method: 'POST',
			url: `/mall/user/v2/generateWxUrlLink`,
			data: {
				path: '/pages/shareRefereeId/index',
				query: `q=${encodeURIComponent(cans)}`,
				envVersion: configs.envVersion
			}
		});
		uni.shareWithSystem({
			summary: '',
			href: res.data,
			success() {
				// 分享完成，请注意此时不一定是成功分享
			},
			fail() {
				// 分享失败
			}
		});
	};
	
	
	/* 页面数据获取 */
	const couresData = reactive({
		courseDetails: {},
		courseChapterList: [],
		courseExamInfo: {},
		courseExamRecordList: {},
		//课程详情
		getCourseDetails: async (courseId) => {
			const res : any = await api({
				method: 'get',
				url: `/mall/course/course/${courseId}`
			})
			couresData.courseDetails = res.data || {}
			console.log(couresData.courseDetails)
			if (couresData.courseDetails.courseType == 1) {

				couresData.getCourseChapterList(couresData.courseDetails.id)
			}
			if (couresData.courseDetails.examId) {

				couresData.getCourseExamInfo(couresData.courseDetails.examId)
				if (userInfo.value) {
					couresData.getCourseExamRecordList({ examId: couresData.courseDetails.examId })
				}

			}


		},
		//章节目录
		getCourseChapterList: async (courseId) => {
			const res : any = await api({
				method: 'get',
				url: `/mall/course/course-chapter/getCourseChapterList?courseId=${courseId}`
			})
			couresData.courseChapterList = res.data || []
			tabs.tabsArr[1].isShow = couresData.courseChapterList.length > 0 ? true : false
			console.log(couresData.courseChapterList)
		},
		// 考试信息
		getCourseExamInfo: async (id) => {
			const res : any = await api({
				method: 'get',
				url: `/mall/exam/info/${id}`
			})
			couresData.courseExamInfo = res.data || {}
			tabs.tabsArr[2].isShow = (couresData.courseExamInfo.status == 1 && couresData.courseDetails.status == 1) ? true : false
		},
		//考试记录
		getCourseExamRecordList: async (data) => {
			const res : any = await api({
				method: 'get',
				url: `/mall/exam/exam-record/getExamRecordList`,
				data
			})
			couresData.courseExamRecordList = res.data || []
			console.log(couresData.courseExamRecordList, 'couresData.courseExamRecordList')
		}
	})
	const preview = (imgUrl) => {
		let images = [imgUrl]
		console.log(images, 'images')
		uni.previewImage({
			current: 0,
			urls: images,
		});
	}
	const fullscreenchange = (e) => {
		if(!e.detail.fullScreen) {
			plus.screen.lockOrientation('portrait-primary')
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: #F8F8F8;
		min-height: 100%;
		//box-sizing: border-box;
		padding-bottom: calc(constant(safe-area-inset-bottom) + 100rpx);
		padding-bottom: calc(env(safe-area-inset-bottom) + 100rpx);
		//box-sizing: border-box;

	}

	.course_cover {
		width: 100%;
		height: 422rpx;

		image {
			width: 100%;
			height: 422rpx;
		}

		video {
			width: 100%;
			height: 422rpx;
		}
	}

	.course_name {
		padding: 40rpx 32rpx;
		width: 100%;
		box-sizing: border-box;
		background-color: #fff;

		.course_name_text {
			display: flex;
			justify-content: space-between;
			position: relative;

			text {
				width: 596rpx;
				display: inline-block;
				font-size: 36rpx;
				color: #1A1A1A;
				font-weight: bold;
				line-height: 1.2;
			}

			image {
				margin-top: 0rpx;
				width: 48rpx;
				height: 48rpx;
			}

			.share {
				position: absolute;
				top: 0rpx;
				right: 0;
				width: 48rpx;
				height: 48rpx;
				opacity: 0;
			}
		}

		.course_name_tips {
			margin-top: 10rpx;
			line-height: 1;
			font-size: 30rpx;
			color: #7C807F;
		}
	}

	.course_tabs {
		width: 100%;
		background-color: #fff;

		.course_tabs_box {
			width: 686rpx;
			margin: 0 auto;
			padding: 48rpx 0 8rpx 0;
			border-top: 2rpx solid #F9F6F6;
			display: flex;
			justify-content: center;

			.course_tab_item {
				width: 33%;
				display: flex;
				flex-direction: column;
				align-items: center;

				.course_tab_item_name {
					margin-bottom: 16rpx;
					font-size: 30rpx;
					color: #5C5E5E;
					line-height: 1;
				}

				.course_tab_item_name_act {
					font-size: 40rpx;
					color: #1B2120;
					font-weight: bold;
				}

				.course_tab_item_tips {
					width: 32rpx;
					height: 8rpx;
					background-color: #FF6084;
					border-radius: 20rpx;
				}
			}
		}
	}

	.mask {
		width: 100%;
		min-height: 700rpx;
		position: absolute;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.4);
		color: #fff;
		font-size: 30rpx;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.course_content {
		width: 100%;
		position: relative;
	}
</style>